<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
		<view class="demo"
			:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10rpx'">
			任务中心
			<view class="left" :style="'top:' + demo.top + 'px'" @click="getMessage">
				<image src="http://images.linglinggong.net/icon1/msg.png" mode=""></image>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view class="demo"
			:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10rpx'">
			任务中心
			<view class="left" :style="'top:' + demo.top + 'px'" @click="getMessage">
				<image src="http://images.linglinggong.net/icon1/msg.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- #endif -->
		<!-- 顶部tab -->
		<view class="tab-bar" :style="{top:demo.top+demo.height+'px'}">
			<view :class="selectTab === 0 ? 'select' : ''" @click="handleTabChange({ detail: { current: 0 } })">全部
			</view>
			<view :class="selectTab === 1 ? 'select' : ''" @click="handleTabChange({ detail: { current: 1 } })">招募中
				<view class="redDreceive" v-if="isReceiveBarRed"></view>
			</view>
			<view :class="selectTab === 2 ? 'select' : ''" @click="handleTabChange({ detail: { current: 2 } })">待结算
				<view class="redDreceive" v-if="isknockoffBarRed"></view>
			</view>
			<view :class="selectTab === 3 ? 'select' : ''" @click="handleTabChange({ detail: { current: 3 } })">已驳回
			</view>
		</view>


		<!-- 主体内容 -->
		<view class="list">
			<!-- 工作信息 -->
			<view class="job-info" v-for="item in jobList" :key="item.id" @click="handleOpenPage(item.id, item.status)">
				<view>
					<view>
						<view
							style="width: 10rpx; height: 40rpx; background: #FCC928; margin-top: 3rpx; border-radius: 0 5rpx 5rpx 0;">
						</view>
						<text>{{item.name.length>9 ? item.name.slice(0,9)+'...' : item.name}}</text>
					</view>
					<!-- 状态栏 -->
					<view class="status"
						:class="item.status === 1 ? 'waitPayGold' : (item.vipFlag === 1 && item.status === 3) ? 'vipPutOn': item.status === 3 ? 'putOn' : item.status === 4 ? 'putDown' : item.status === 5 ? 'finish' : item.status === 6 ? 'cancel' : item.status === 7 ? 'waitPay' : item.checkStatus === 2 ? 'reject' : 'examine' ">
						<text>{{ (item.status === 1 && item.serverFlag) ? '待付款' : item.status === 1 ? '待付款' : item.status === 3 ? '招募中' : item.status === 4 ? '工作中' : item.status === 5 ? '已完成' : item.status === 6 ? '已取消' : item.status === 7 ? '待结算'  : item.checkStatus === 2 ? '已驳回' : '审核中' }}</text>
					</view>
				</view>

				<view>
					<view>
						<text>{{ item.reward }}</text>
						<text>金额（{{ item.taskType==0 ? '元/小时' : item.taskType==1 ? '元/件' : item.taskType==2 ? '元/天' : ''}}）<text
								class="floorsstr-view" v-if="item.floorsstr==1">保底</text></text>
					</view>
					<view style="width: 1rpx;height: 80rpx;border-left: 1rpx solid #F5F5F5; margin-right: 1rpx;"></view>
					<view>
						<text>{{item.number}}</text>
						<text>雇员数（人）</text>
					</view>
				</view>

				<view>
					<image src="http://images.linglinggong.net/icon1/address.png" mode="aspectFill"></image>
					<text>{{getShowAdd(item.address)}}</text>
				</view>
				<view class="status-info" v-if="((item.status == 3) || item.status == 4)"
					:style="{'margin-bottom': item.status == 3 || item.status == 4 || item.checkStatus ==2 ||  item.remark !='审核通过' && item.remark !='' ? '36rpx' : '16rpx'}">
					<image v-if="(item.status == 3 || item.status == 4) && item.remark =='审核通过'"
						src="http://images.linglinggong.net/icon1/guyuan.png" mode="aspectFill"></image>
					<text
						style="color: #17C295;">{{ (item.status == 3 || item.status == 4) && item.remark =="审核通过"? (item.applyNum==0 ? ('暂无雇员接单&#12288;&#12288;&#12288;') : ('有'+ item.applyNum + '个雇员接单&#12288;&#12288;&#12288;')) :''}}</text>
					<image v-if="item.checkStatus ==2 ||  (item.remark !='审核通过' && item.remark !='')"
						src="http://images.linglinggong.net/icon1/bohui.png" mode="aspectFill"></image>
					{{ item.checkStatus ==2 &&  item.remark !="审核通过" && item.remark !="" ? ('驳回理由: '+ item.remark) :''}}
					{{ item.status ==4 &&  item.remark !="审核通过" && item.remark !="" ? ('下架理由: '+ item.remark) :''}}
				</view>
				<view class="last-line" v-if="!(item.status == 2 && item.checkStatus == 1)">
					<view class="buttons">

						<view @click.stop="handleOpenModal(0, item.status, item.id, item)" class="button quxiao"
							v-if="item.status !=7  && item.status != 4">
							{{ (item.status == 6 || item.status == 5 ) ? '删除' : '取消' }}
						</view>

						<view v-if="item.status === 3" class="bottom-button-view-alert"
							:style="{left:((item.number - item.applyNum)>0 && item.invitation < item.number)?'33.5%':'65%'}">
							<view class="bottom-button-view-alert-view">分享别人来接单吧！</view>
							<view class="bottom-button-view-alert-sj"></view>
						</view>
						<!--  #ifdef  APP-PLUS -->
						<view @click.stop="openShare" :data-item='item' class="button zhifu" v-show="item.status === 3">
							分享</view>
						<!-- #endif -->
						<!--  #ifdef MP -->
						<button open-type="share" :data-item='item' class="button zhifu" v-show="item.status === 3"
							@touchstart="setId" @click.stop="">分享</button>
						<!-- #endif -->
						<view @click.stop="handleOpenModal(4, item.status, item.id,item)"
							v-if="item.status === 3 && (item.number - item.applyNum)>0 && item.invitation < item.number"
							class="button zhifu">
							{{ '邀请' }}<text style="font-size: 18rpx; color: #402110;margin-top: 6rpx;">(老雇员)</text>
						</view>
						<view @click.stop="handleOpenModal(1, item.status, item.id)"
							v-if="(item.status==1 || item.status==5 || item.checkStatus==2 ) && (item.status != 6)"
							class="button zhifu">
							{{item.status == 1 ? '支付' : item.checkStatus == 2 ? '重新发布' : item.status==5 ? '一键发布' : '一键发布'}}
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 空列表logo -->
		<view class="nullListLogo" v-if="isShowNullList">
			<image src="http://images.linglinggong.net/icon1/dingdan.png" mode="aspectFill"></image>
			<text>这里没有相关的任务</text>
		</view>
		<!-- 加载 -->
		<uni-load-more :status="hasFlag ? 'loading' : 'noMore'" v-if="!isShowNullList"></uni-load-more>
		<view class="hg-108" style="background-color: #F2F2F2;"></view>
		<!-- 弹窗 -->
		<modal :titleColor="titleColor" :contentColor="contentColor" :contentsColor="contentsColor"
			:isShowModal="isShowModal" :modalStytle="modalStytle" :unitPrice="unitPrice" :workTime="workTime"
			:workPrice="workPrice" :button="button" :status="clickStatus" :clickJobType="clickJobType"
			@handleLeft="handleLeft" @handleRight="handleRight" :titleContect="titleContect"
			:middleContext="middleContext" :leftContext="leftContext" :rightContext="rightContext"></modal>

		<!-- 引导对话框 -->
		<view class="nullListMsg" v-if="isShowNullList && isShowfabu">
			<view>
				点击这里发布任务
			</view>
			<view></view>
		</view>
		<!-- <view class="hg-98"></view> -->
		<jobPay v-if="isShowPay" :get-task-id="newTaskId" @closePayPage="isShowPay=false"></jobPay>
		<hans-tabber :indexNum="0" style="position:fixed;bottom:0;left:0;"></hans-tabber>

		<!-- 分享弹框 -->
		<view class="share-modal" v-if="isOpenModal">
			<view class="main">
				<image @click="handleCloseModal" class="close" src="http://images.linglinggong.net/icon3/gb.png">
				</image>
				<view>
					<view @click="handleShare('WXSenceTimeline')">
						<image src="http://images.linglinggong.net/icon3/000000001.png" mode="aspectFill"></image>
						<text>朋友圈</text>
					</view>
					<view @click="handleShare('WXSceneSession')">
						<image src="http://images.linglinggong.net/icon3/0000000002.png" mode="aspectFill"></image>
						<text>微信群</text>
					</view>
					<view @click="handleShare('WXSceneSession')">
						<image src="http://images.linglinggong.net/icon3/00000000003.png" mode="aspectFill"></image>
						<text>喊工友</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import hansTabber from '@/components/hans-tabbar/hans-tabbar.vue'
	import jobPay from './send-job-pay/send-job-pay-new.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import modal from '@/components/modal/modal.vue'
	export default {
		components: {
			uniLoadMore,
			modal,
			hansTabber,
			jobPay
		},
		data() {
			return {
				titleColor: '#402110',
				contentColor: '#402110',
				contentsColor: '#fe4b28',
				modalStytle: 3, //0-left-text,1-two-line,2-hasInput, 3-middle-context
				hasFlag: true, //是否加载完成
				timer: null, //定时器
				selectTab: 0, // 当前选中的tabbar索引 index
				button: 1, //按钮类型
				taskId: '', //点中的工作taskId
				clickStatus: 0, //工作状态
				clickJobType: 2, //工作类型0计时工，1：计天工，2计件工
				isShowModal: false, //是否显示弹框
				titleContect: '', //弹框标题
				middleContext: '', //弹框中间的内容
				unitPrice: 0, //计件单价
				workTime: '0', //计时工作时间
				workPrice: 0, //工作单价
				leftContext: '取消', //弹框按钮左边的内容
				rightContext: '确认', //弹框按钮右边的内容
				jobList: [],
				requestObj: {
					pageNum: 0,
					pageSize: 10,
					userId: '',
					status: '',
					userId: '',
					isAsc: 'desc',
					orderByColumn: 'createTime',
				},
				userInfo: {
					user: {},
					params: {}
				}, //当前用户信息
				imgPath: '', //图片路径
				street: {}, //街道
				handleIsStop: true, // 是否允许切换
				isShowNullList: false, //是否是空零工
				isShowfabu: false, //是否显示发布
				isTabBarRed: false,
				isShowPay: false, //是否显示付款窗口
				newTaskId: '', //发布任务的id
				isReceiveBarRed: false,
				isknockoffBarRed: false,
				isOpenModal: false,
				fenXiangId: 0,
				wechatTitle: '我在找零工接单了',
				wechatInfo: '海量高薪任务日结，工作轻松，时间自由，上班不如一起做零工！',
				demo: {
					top: 48,
					height: 32
				},
                                isShowMoreId: -1
			}
		},
		methods: {
			/* 获取微信小程序导航栏的高度 */
			getMenuBar() {
				const demo = uni.getMenuButtonBoundingClientRect()
				this.demo.top = demo.top
				this.demo.height = demo.height
			},
			/* 初始化支付宝小程序navbar */
			navbarInit() {
				my.hideBackHome()
				my.hideAddToDesktopMenu();
			},
			//打开消息
			getMessage() {
				uni.navigateTo({
					url: '/pages/message/message-new'
				})
			},
			getShowAdd(add) {
				add = add.split('·')
				add.pop()
				return add.join('·')
			},
			/* 开启分享 */
			openShare(e) {
				var item = e.currentTarget.dataset.item
				this.isOpenModal = true
				this.fenXiangId = item.id
				this.getTitle(item)
			},
			//设置分享内容
			setId(e) {
				console.log(e)
				var item = e.currentTarget.dataset.item
				this.fenXiangId = item.id
				this.getTitle(item)
			},
			//小程序分享
			onShareAppMessage() {
				return {
					title: this.wechatTitle,
					desc: this.wechatInfo,
					path: '/pages/index/index?taskId=' + this.fenXiangId + '&fenxid=' + uni.getStorageSync('userId'),
					imageUrl: 'http://images.linglinggong.net/FovByz9oRrP4wIPyrtiJJf-0cxwB'
				}
			},
			//打开弹框
			handleOpenModal(button, status, taskId, item) {
				this.taskId = taskId
				// console.log('button',button, 'status',status,'id', taskId)
				this.button = button
				this.clickStatus = status
				if (button === 0 && (status == 6 || status == 5 || status == 4)) {
					this.modalStytle = 99
					this.titleContect = '删除零工'
					this.middleContext = ' 是否删除零工？'
					this.leftContext = '取消'
					this.rightContext = '确认'
					this.isShowModal = true
					this.titleColor = '#402110'
					this.contentColor = '#402110'
				} else if (button === 0 && status != 6 && status != 5) {
					this.titleColor = '#000000'
					this.contentColor = '#787878'
					this.modalStytle = 99
					this.titleContect = '取消零工'
					if (item.applyNum == 0) {
						this.middleContext = '确认要取消任务吗？'
					} else {
						this.modalStytle = 98
						this.contentsColor = '#fe4b28'
						let g = item.sincerityGold / 100
						g = g / item.number
						g = g * item.applyNum
						let middleContext = item.userpaytype == 1 ? '任务已被接单，取消将会#扣除' + g + '元诚意金#作为违约补贴，你确认要取消吗？' :
							item.userpaytype == 2 ? '任务已被接单，取消将会#扣除' + g + '元服务费#作为违约补贴，你确认要取消吗？' :
							item.userpaytype == 3 ? '任务已被接单，取消将会#消耗直通卡' + item.applyNum + '人#，你确认要取消吗？' :
							'任务已被接单，取消将会#扣除' + g + '元诚意金#作为违约补贴，你确认要取消吗？'
						this.middleContext = middleContext
					}
					this.leftContext = '取消'
					this.rightContext = '确认'
					this.isShowModal = true

				} else if (button == 2 && status == 3) {
					this.titleColor = '#000000'
					this.contentColor = '#787878'
					this.modalStytle = 99
					this.titleContect = '隐藏零工'
					this.middleContext = '是否对雇员们隐藏您的任务!'
					this.leftContext = '取消'
					this.rightContext = '确认'
					this.isShowModal = true
				} else if (button == 3 && status == 3) {
					this.titleColor = '#000000'
					this.contentColor = '#787878'
					this.modalStytle = 99
					this.titleContect = '显示零工'
					this.middleContext = '是否对雇员们显示您的任务!'
					this.leftContext = '取消'
					this.rightContext = '确认'
					this.isShowModal = true
				} else if (button == 4 && status == 3) {
					// 雇佣
					if ((item.number - item.applyNum) < 1) {
						uni.showToast({
							title: '人数已经满,不用再邀请了~',
							icon: 'none'
						})
					} else {
						uni.navigateTo({
							url: '/pages/app-employer/my-employee/my-employee-new?taskId=' + item.id + '&num=' + (
								item.number - item.applyNum)
						})
					}

				} else if (button == 1 && status == 1) {
					// 支付
					this.newTaskId = this.taskId
					uni.redirectTo({
						url: '/pages/app-employer/fabu-pay/fabu-pay?taskId=' + this.taskId
					})
				} else if (button == 1 && status == 5) {
					uni.navigateTo({
						url: '/pages/quickSendJob/invite?taskId=' + this.taskId + '&page=' + 1
					})
				} else if (this.button == 1 && this.clickStatus == 2) {
					// 驳回修改
					// 人数不能变
					// #ifdef MP-WEIXIN || MP-TOUTIAO
					uni.navigateTo({
						url: '/pages/app-employer/send-job/send-job?taskId=' + this.taskId + '&type=bohui'
					})
					// #endif
					// #ifdef MP-ALIPAY
					uni.reLaunch({
						url: '/pages/app-employer/send-job/send-job?taskId=' + this.taskId + '&type=bohui'
					})
					// #endif
				}
			},

			//弹框左键
			handleLeft() {
				this.isShowModal = false
			},
			//计算任务人数，报名加邀请的人数
			addTaskNumber(number, invitation) {
				let v = parseInt(number) + parseInt(invitation)
				return v
			},
			//弹框右键
			async handleRight() {
				this.isShowModal = false
				// 删除
				if (this.button == 0 && (this.clickStatus == 6 || this.clickStatus == 5 || this.clickStatus == 4)) {
					let res = await this.$fetch(this.$api.del_task, {
						taskId: this.taskId
					}, 'POST')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					// 取消
				} else if (this.button == 0 && this.clickStatus != 6 && this.clickStatus != 5) {
					let res = await this.$fetch(this.$api.cancel_task, {
						taskId: this.taskId
					}, 'POST')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else if (this.button == 2 && this.clickStatus == 3) {
					let res = await this.$fetch(this.$api.hide_task, {
						taskId: this.taskId,
						token: uni.getStorageSync('token'),
						hide: 1
					}, 'POST')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else if (this.button == 3 && this.clickStatus == 3) {
					let res = await this.$fetch(this.$api.hide_task, {
						taskId: this.taskId,
						token: uni.getStorageSync('token'),
						hide: 0
					}, 'POST')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				this.refresh()
			},

			// 更改类目
			handleTabChange({
				detail: {
					current
				}
			}) {
				if (this.selectTab == current) return
				this.selectTab = current
				if (this.selectTab == 1) {
					uni.setStorageSync('isReceiveBarRed', false)
					this.isReceiveBarRed = false
				}
				if (this.selectTab == 2) {
					uni.setStorageSync('isknockoffBarRed', false)
					this.isknockoffBarRed = false
				}
				this.requestObj.status = this.selectTab == 0 ? '' : this.selectTab == 1 ? 3 : this.selectTab == 3 ? 8 : ''
				this.requestObj.statusIn = this.selectTab == 2 ? '4,7' : ''
				this.refresh()
			},

			//打开订单详情页
			handleOpenPage(id, taskStatus) {
				uni.navigateTo({
					url: '/pages/app-employer/boss-order-detail/boss-order-detail?id=' + id + '&taskStatus=' +
						taskStatus
				})
			},

			//待开工招人提醒
			standTask(id, time) {
				let info = {
					taskId: id,
					taskTime: time
				}
				uni.setStorageSync('taskDKGTX', info)
			},

			//获取我的零工 
			async task_list() {
				console.log('获取我的零工', this.hasFlag, this.handleIsStop)
				if (!this.hasFlag) return // 说明已经没有更多啦
					++this.requestObj.pageNum

				if (!this.handleIsStop) return uni.showToast({
					title: '你点击得太快啦~',
					icon: 'none'
				}) // 说明上一条请求结果未返回
				this.handleIsStop = false

				this.requestObj.userId = this.userInfo.userId
				console.log(this.userInfo)
				// console.log('获取我的零工 参数this.requestObj',this.requestObj)
				let res = await this.$fetch(this.$api.task_list, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				if (res.rows.length == 0) {
					this.isShowNullList = true
				} else {
					this.isShowNullList = false
				}
				if (res.rows.length == 0 && this.selectTab == 0) {
					this.isShowfabu = true
				}
				console.log('获取我发布的零工 res.rows[0]', res.rows[0])
				res.rows.forEach(item => {
					item.reward = item.reward.divide(100)
					item.floorsAmount = item.floorsAmount ? item.floorsAmount.divide(100) : 0
				})

				uni.stopPullDownRefresh()
				this.handleIsStop = true

				this.jobList = [...this.jobList, ...res.rows]
				if (this.jobList.length > 0) {
					this.fenXiangId = this.jobList[0].id
				}

				// console.log('666', this.jobList)
				this.hasFlag = this.requestObj.pageSize * this.requestObj.pageNum < res.total
			},
			// 刷新
			refresh() {
				this.userInfo=uni.getStorageSync('userInfo')
				this.jobList = []
				this.hasFlag = true
				this.requestObj.pageNum = 0
				this.requestObj.pageSize = 10
				this.task_list()
			},
			//邀请成功
			inviteSucceed() {
				setTimeout(() => {
					uni.showToast({
						title: '邀请成功~',
						icon: 'none'
					})
				}, 1000)
			},
			// 关闭分享弹框
			handleCloseModal() {
				this.isOpenModal = false
			},
			//分享
			handleShare(scene) {
				console.log('分享场景', scene)
				this.task_share()
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 0,
					href: 'http://share.linglinggong.net/#/?taskId=' + this.fenXiangId + '&fenxid=' + uni
						.getStorageSync('userId'),
					// title: "我在找零工接单了",
					title: this.wechatTitle,
					summary: this.wechatInfo,
					imageUrl: 'http://images.linglinggong.net/FovByz9oRrP4wIPyrtiJJf-0cxwB',
					success: function(res) {
						// console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
						uni.showToast({
							title: '未登陆',
							icon: 'none'
						})
					}
				});
			},
			async task_share() {
				let res = await this.$fetch(this.$api.task_share, {
					type: 1
				}, 'POST')
			},
			getTitle(item) {
				this.wechatTitle = item.address.split('·').splice(0, 2).join('·') + '|' + item.name + '|' + item.reward + (
					item.taskType == 0 ? '元/小时' : item.taskType == 1 ? '元/件' : '元/天')
				this.wechatInfo = item.taskContent == '' ? '海量高薪任务日结，工作轻松，时间自由，上班不如一起做零工！' : item.taskContent
				console.log(this.wechatInfo)
			},
			// 获取当前用户信息
			async getUserInfo() {

				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				if (res.code) return
				Object.getOwnPropertyNames(res.data.user).forEach(function(key) {
					res.data.user[key] = res.data.user[key] == null ? '' : res.data.user[key]
				})
				res.data.user.avatar = res.data.user.avatar ? res.data.user.avatar : ''
				res.data.user.sex = res.data.user.sex ? res.data.user.sex.toString() : '0' //讲数字变成字符串
				uni.setStorageSync('userInfo', res.data)
				uni.setStorageSync('userType', res.data.userType)
			},

		},

		onLoad() {
			this.getUserInfo()
			this.imgPath = uni.getStorageSync('imgPath')
			this.street = uni.getStorageSync('street')
			// uni.startPullDownRefresh()
			// #ifdef MP-WEIXIN || MP-TOUTIAO 
			this.getMenuBar()
			//#endif

			//判断是否是 刘海 全面屏
		},
		onReady() {
			//#ifdef MP-ALIPAY
			if (my.canIUse('hideBackHome')) {
				this.navbarInit()
			}
			//#endif
		},
		onShow() {
			this.idphotoPath = uni.getStorageSync("idphoto")
			if (this.timer == null) {
				clearInterval(this.timer)
			}
			this.refresh()
			console.log('我发布的零工')
			this.timer = setInterval(() => {
				this.isReceiveBarRed = uni.getStorageSync("isReceiveBarRed")
				this.isTabBarRed = uni.getStorageSync("isTabBarRed")
				this.isknockoffBarRed = uni.getStorageSync("isknockoffBarRed")
			}, 1000)

		},
		onReachBottom() {
			console.log('到底')
			this.task_list()
		},

		onBackPress() {
			if (this.isShowPay) {

				return true
			}
		},

		onPullDownRefresh() {
			//监听用户下拉动作，一般用于下拉刷新
			this.refresh()
		},
		onHide() {
			clearInterval(this.timer)
		},
	}
</script>

<style lang="less" scoped>
	@mt : calc((var(--status-bar-height))/2);

	.container {
		overflow: hidden;
		width: 100vw;
          //#ifdef MP-WEIXIN || MP-TOUTIAO
		.demo {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			width: 100vw;
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			z-index: 2;

			.left {
				float: right;
				position: absolute;
				width: max-content;
				height: max-content;
				top: 0;
				bottom: 0;
				left: 20rpx;
				margin: auto;

				image {
					height: 50rpx;
					width: 50rpx;
				}
			}
		}
         //#endif
		 //#ifdef MP-ALIPAY
		 .demo {
		 	position: fixed;
		 	display: flex;
		 	align-items: center;
		 	justify-content: center;
		 	background: #fff;
		 	width: 100vw;
		 	font-size: 32rpx;
		 	font-weight: bold;
		 	color: #000000;
		 	z-index: 2;
		 
		 	.left {
		 		float: right;
		 		position: absolute;
		 		width: 100rpx;
		 		height: max-content;
		 		top: 0;
		 		bottom: 0;
		 		left: 20rpx;
		 		margin: auto;
		 
		 		image {
		 			height: 50rpx;
		 			width: 50rpx;
		 		}
		 	}
		 }
		  //#endif
		&>.tab-bar {
			z-index: 1;
			position: fixed;
			display: flex;
			height: 90rpx;
			background-color: #FFFFFF;
			font-size: 26rpx;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03);

			&>view {
				// border: 1px solid #007AFF;
				display: flex;
				width: 25vw;
				height: 90rpx;
				// position: relative;
				justify-content: center;
				align-items: center;
				color: rgba(64, 33, 16, 0.50);
			}

			&>.select {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				font-size: 32rpx;
				font-weight: bold;
				color: #402110;

				&::before {
					content: "";
					position: absolute;
					left: 65.75rpx;
					bottom: 0;
					width: 56rpx;
					height: 6rpx;
					background: #FCC928;
					border-radius: 3rpx;
				}
			}
		}

		&>.list {
			margin-top: calc(230rpx + (var(--status-bar-height))/2);
			.job-info {
				margin: 0 auto;
				margin-bottom: 20rpx;
				width: 630rpx;
				//height: 400rpx;
				border-radius: 12rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;
				padding: 36rpx 30rpx 40rpx 30rpx;

				&>view {
					display: flex;
				}

				&>view:nth-child(1) {
					justify-content: space-between;
					margin-bottom: 36rpx;

					&>view {
						display: flex;

						&>text:nth-child(2) {
							margin-left: 20rpx;
							color: #3E220A;
							line-height: 40rpx;
							font-weight: bold;
							font-size: 36rpx;
							letter-spacing: 0;
							align-items: center;
						}
					}

					&>.status {
						font-size: 24rpx;
						width: 90rpx;
						height: 36rpx;
						border-radius: 8rpx;

						&.putDown,
						&.putOn,
						&.inProgress,
						&.waitPay,
						&.vipPutOn {
							color: #17C295;
							background: #EFFAF7;
						}

						&.examine,
						&.waitPayGold {
							color: #F37878;
							background: #FDE4E4;
						}

						&.finish,
						&.reject,
						&.cancel {
							color: #AAAAAA;
							background: #F5F5F5;
						}

						&>text {
							margin: auto;
						}
					}
				}

				&>view:nth-child(2) {
					display: flex;
					justify-content: space-around;
					margin-bottom: 36rpx;

					&>view:nth-child(1) {
						display: flex;
						align-items: center;
						flex-direction: column;
						transform: translateX(25%);

						&>text:nth-child(1) {
							font-size: 48rpx;
							margin-bottom: 24rpx;
							line-height: 45rpx;
						}

						&>text:nth-child(2) {
							font-size: 24rpx;
							color: #A5A5A5;
						}
					}

					&>view:nth-last-child(1) {
						display: flex;
						align-items: center;
						flex-direction: column;
						height: 89rpx;
						transform: translateX(-25%);

						&>text:nth-child(1) {
							font-size: 48rpx;
							margin-bottom: 24rpx;
							line-height: 45rpx;
						}

						&>text:nth-child(2) {
							font-size: 24rpx;
							color: #A5A5A5;
						}
					}
				}

				&>view:nth-child(3) {
					// border: 1px solid #000000;
					// height: 34rpx;
					background: #F5F5F5;
					border-radius: 8rpx;
					display: flex;
					min-height: 48rpx;
					margin-bottom: 24rpx;
					font-size: 24rpx;
					color: #000000;
					letter-spacing: 0;

					&>image {
						align-self: center;
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
						margin-left: 10rpx;
					}

					&>text {
						margin: auto 0;
					}
				}

				&>.money {
					line-height: 48rpx;
					font-weight: bold;
					font-size: 17rpx;
					color: #FF650C;
					letter-spacing: 0;
				}

				&>.status-info {
					&>image {
						align-self: center;
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
						margin-left: 8rpx;
					}

					font-size: 24rpx;
					color: #A5A5A5;
				}

				&>.last-line {
					//margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					&>.buttons {
						// border: 1px solid #000000;
						display: flex;
						align-self: flex-end;

						&>.button {
							width: 187rpx;
							height: 68rpx;
							border-radius: 8rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;

							&:active {
								opacity: 0.7;
							}
						}

						.quxiao {
							border: 1px solid #BDBDBD;
							color: #B9B9B9;
						}

						.yincang {
							border: 1px solid #BDBDBD;
							color: #B9B9B9;
							margin-left: 30rpx;
						}

						.zhifu {
							border: 1px solid #FCC928;
							background: #FCC928;
							margin-left: 30rpx;
							color: #402110;
						}
					}
				}
			}
		}

		.nullListLogo {
			//background-color: #F2F2F2;
			width: 300rpx;
			height: 316rpx;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			&>image {
				width: 240rpx;
				height: 240rpx;
			}

			&>text {
				color: #402110;
				font-size: 30rpx;
			}
		}
	}

	.nullListMsg {
		width: 346rpx;
		height: 105rpx;
		position: fixed;
		left: 50%;
		top: calc(100% - 140rpx);
		transform: translateX(-50%) translateY(-50%);
		text-align: center;
		z-index: 501;

		&>view:nth-child(1) {
			width: 346rpx;
			height: 90rpx;
			background: #000000;
			opacity: 0.5;
			border-radius: 10rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&>view:nth-child(2) {
			width: 0;
			height: 0;
			border-left: 15rpx solid transparent;
			border-right: 15rpx solid transparent;
			border-top: 30rpx solid #000000;
			opacity: 0.5;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.redD {
		background-color: #FE4B28;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		left: 50rpx;
		bottom: 16rpx;
		position: relative;
		.anim-redD
	}

	.redDreceive {
		background-color: #FE4B28;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		bottom: 16rpx;
		position: relative;
		.anim-redD
	}

	.anim-redD {
		animation: 2s redD 0s infinite;
	}

	@keyframes redD {
		0% {
			transform: translateY(0);
		}

		30% {
			transform: translateY(-15rpx);
		}

		40% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10rpx);
		}

		70% {
			transform: translateY(0rpx);
		}

		80% {
			transform: translateY(-5rpx);
		}

		100% {
			transform: translateY(0);
		}
	}


	.share-modal {
		z-index: 500;
		position: fixed;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.40);

		&>.mains {

			position: fixed;
			bottom: 40%;
			left: 11%;
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
			border-radius: 17px 17px 0 0;

			display: flex;
			flex-direction: column;
			align-items: center;


		}


		z-index: 11;
		position: fixed;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.40);

		&>.mains {

			position: fixed;
			bottom: 40%;
			left: 11%;
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
			border-radius: 17px 17px 0 0;

			display: flex;
			flex-direction: column;
			align-items: center;


		}

		&>.main {
			position: fixed;
			bottom: 108rpx;
			// padding: 30rpx;
			background: #FFFFFF;
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
			border-radius: 17px 17px 0 0;
			z-index: 999;
			display: flex;
			flex-direction: column;

			// align-items: center;
			&>.close {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 28rpx;
				height: 28rpx;
			}

			&>view {
				display: flex;
				width: 100vw;
				padding: 100rpx 0 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				line-height: 45rpx;

				&>view {
					// border: 1px solid #000000;
					display: flex;
					flex: 1;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					&>image {
						width: 120rpx;
						height: 120rpx;
						margin-bottom: 24rpx;
					}
				}
			}
		}



	}

	.floorsstr-view {
		background: #FDE4E4;
		border-radius: 4rpx;
		color: #E62B00;
		padding: 3rpx 8rpx;
	}

	.bottom-button-view-alert {
		width: 248rpx;
		height: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 120rpx;
		.anim-bounce;
	}

	.bottom-button-view-alert-view {
		width: 248rpx;
		height: 48rpx;
		background: linear-gradient(-90deg, #FF7E28, #FF231C);
		font-size: 24rpx;
		line-height: 48rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		border-radius: 48rpx;
	}

	.bottom-button-view-alert-sj {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 20rpx solid #FF231C;
	}

	.anim-bounce {
		animation: 2.5s bounce 0s infinite;
	}

	@keyframes bounce {
		0% {
			transform: scale(1, 1);
		}

		50% {
			transform: scale(0.8, 0.8);
		}

		100% {
			transform: scale(1, 1);
		}
	}
</style>
